<template>
  <div style="height: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">名酒排行榜</span>
      </x-header>
      <div class="main-headerAndTab">
        <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B" :scroll-threshold="3">
          <tab-item selected  active-class="active1" @click.native="change1">关注</tab-item>
          <tab-item active-class="active1" @click.native="change2">综合</tab-item>
          <tab-item active-class="active1" @click.native="change3">新品</tab-item>
        </tab>
        <group>
          <cell-box v-for="(item,index) in winelist" :key="item.id">
            <div class="smoke">
              <div class="img">
                <img src="../../../static/icon/timg.jpg" alt="" class="smoke-img">
                <span style="position: absolute; left: -10%;top: -10%"><img src="../../../static/icon/diyiming.png"  class="rank-img" v-if="index === 0"></span>
                <span style="position: absolute; left: -10%;top: -10%"><img src="../../../static/icon/dierming.png"  class="rank-img" v-if="index === 1"></span>
                <span style="position: absolute; left: -10%;top: -10%"><img src="../../../static/icon/disanming.png"  class="rank-img" v-if="index === 2"></span>
              </div>
              <div class="smoke-info">
                <span class="smoke-name">{{item.goodName}}</span>
                <span class="smoke-price">参考价:<span class="smoke-money">￥{{item.price}}</span></span>
                <span class="smoke-score">综合评分:<span class="score-num">85</span>分</span>
              </div>
            </div>
          </cell-box>
        </group>
      </div>
    </div>
  </div>
</template>

<script>
  import { wineRanking } from '@/api/rank'
    export default {
        name: "winerank",
      methods:{
        back(){
          this.$router.go(-1)
        },
        change1(){
          this.rankType=1;
          wineRanking(this.rankType).then(res =>{
            console.log(res)
            this.winelist=res.data
          })
        },
        change2(){
          this.rankType=2;
          wineRanking(this.rankType).then(res =>{
            console.log(res)
            this.winelist=res.data
          })
        },
        change3(){
          this.rankType=3;
          wineRanking(this.rankType).then(res =>{
            console.log(res)
            this.winelist=res.data
          })
        },
        wineRanking(){
          wineRanking(this.rankType).then(res =>{
            console.log(res)
            this.winelist=res.data
          })
        }
      },
      data(){
        return{
          winelist:[
          ],
          rankType: 1
        }
      },
      created(){
        this.wineRanking()
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .active1{
    font-weight: bolder;
  }
  .smoke{
    display: flex;
    flex-direction: row;
  }
  .img{
    position:relative;
  }
  .img .rank-img{
    width: 2.86rem;
    height: 2.86rem;
    display: block;
  }
  .smoke-img{
    width: 5.71rem;
    height: 5.71rem;
  }
  .smoke-info{
    display: flex;
    flex-direction: column;
    margin-left: 1.08rem;
  }
  .smoke-name{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .smoke-price{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
    margin-top: 1.07rem;
  }
  .smoke-money{
    font-size: 17px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.64rem;
  }
  .smoke-score{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .score-num{
    font-size: 14px;
    color: #F5A623;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.64rem;
  }
</style>
